<template>
	<div class="visitor_box">
		<div class="header">
			<div class="left">
				<div class="free">{{ data.isInsure === 1 ? '医保' : '自费' }}</div>
				<div class="username">{{ data.name }}</div>
			</div>
			<div class="right">
				<el-button type="primary" :icon="Edit" circle @click="emits('edit')" />
				<el-popconfirm title="确定要删除吗？" v-if="deleteBut" @confirm="emits('delete')">
					<template #reference>
						<el-button type="danger" :icon="Delete" circle />
					</template>
				</el-popconfirm>
			</div>
		</div>
		<div class="content" @click="emits('click')">
			<div class="line">
				<div class="label gray">证件类型：</div>
				<div class="value">{{ data.param.certificatesTypeString }}</div>
			</div>
			<div class="line">
				<div class="label gray">证件号码：</div>
				<div class="value">{{ data.certificatesNo }}</div>
			</div>
			<div class="line">
				<div class="label gray">用户性别：</div>
				<div class="value">{{ data.sex === 0 ? '女生' : '男士' }}</div>
			</div>
			<div class="line">
				<div class="label gray">出生日期：</div>
				<div class="value">{{ data.birthdate }}</div>
			</div>
			<div class="line">
				<div class="label gray">手机号码：</div>
				<div class="value">{{ data.phone }}</div>
			</div>
			<div class="line">
				<div class="label gray">婚姻状况：</div>
				<div class="value">{{ data.isMarry === 1 ? '已婚' : '未婚' }}</div>
			</div>
			<div class="line">
				<div class="label gray">当前住址：</div>
				<div class="value">{{ data.param.cityString }}</div>
			</div>
			<div class="line">
				<div class="label gray">详细住址：</div>
				<div class="value">{{ data.param.fullAddress }}</div>
			</div>
		</div>
		<transition name="selected">
			<div class="selected" v-show="selected">已选择</div>
		</transition>
	</div>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue';
import { PropType } from 'vue';
import type { Patient } from '@/api/hospital/type';

defineProps({
	data: {
		type: Object as PropType<Patient>,
		required: true,
	},
	selected: {
		type: Boolean,
		default: false,
	},
	deleteBut: {
		type: Boolean,
		default: false,
	},
});

const emits = defineEmits(['click', 'delete', 'edit']);
</script>

<style scoped lang="scss">
.visitor_box {
	box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	overflow: hidden;
	transition: all 300ms;
	position: relative;
	&:hover {
		box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12);
		transform: translate(0, -2px);
	}
	.header {
		background-color: #e5e5e5;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 60px;
		padding: 0 15px;
		width: calc(100% - 30px);
		.left {
			display: flex;
			align-items: center;
			.free {
				font-size: 13px;
				background-color: #fff;
				border-radius: 50%;
				width: 32px;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.username {
				margin-left: 10px;
			}
		}
	}
	.content {
		padding: 16px 20px;
		position: relative;
		z-index: 2;
		cursor: pointer;
		.line {
			display: flex;
			font-size: 14px;

			&:not(:last-child) {
				margin-bottom: 16px;
			}
			.label {
				white-space: nowrap;
				margin-right: 10px;
			}
		}
	}
	.selected {
		width: 180px;
		height: 180px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 20px;
		font-weight: 900;
		color: red;
		border: 2px solid red;
		transform: translate(-50%, -50%) rotate(45deg);
		position: absolute;
		top: 50%;
		left: 50%;
		opacity: 0.3;
		user-select: none;
	}

	.selected-enter-from {
		transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
		opacity: 0;
	}
	.selected-enter-active {
		transition: all 0.3s;
	}
}
</style>
